<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>右键自定义菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            width: 200px;
            padding: 10px;
            border: solid 1px #000;
            display: none; /* 默认隐藏 */
            position: absolute; /* 绝对定位 */
            box-sizing: border-box; /* 包括padding和border在内的宽高计算 */
        }
        ul li:hover{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <ul id="menu">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
    <script>
        document.oncontextmenu = function(e){
            e.preventDefault(); // 阻止默认右键菜单
            var menu = document.getElementById('menu');
            menu.style.display = 'block'; // 显示自定义菜单
            var x = e.clientX; // 获取鼠标位置
            var y = e.clientY;
            if((x + parseInt(getComputedStyle(menu).width))  > document.documentElement.clientWidth){
                x = x - parseInt(getComputedStyle(menu).width); // 设置菜单位置
            }
            if((y + parseInt(getComputedStyle(menu).height)) > document.documentElement.clientHeight){
                y = y - parseInt(getComputedStyle(menu).height); // 设置菜单位置
            }
            menu.style.left = x + 'px'; // 设置菜单位置
            menu.style.top = y + 'px';
        }
        document.onclick = function(){
            var menu = document.getElementById('menu');
            menu.style.display = 'none'; // 点击其他地方隐藏菜单
        }
    </script>
</body>
</html>